<!-- 构造表单拖拽页面的容器 -->
<template>
    <el-container class="fm2-container" >
        <div class="eo-vis-editor-header " >
            <ul class="eo-vis-menu-bar ng-isolate-scope">
                <!-- ngIf: eoVisMenuBar.isModelLoaded -->
                <li ng-if="eoVisMenuBar.isModelLoaded" class="eo-vis-menu-bar-element ng-scope">
                    <div class="eo-vis-menu ng-isolate-scope">
                        <div class="eo-vis-menu-svgWrapper" style="font-size: 28px;" @click="saveJson" e-tooltip-html="true"
                             tabindex="0" title="保存" aria-disabled="false">

                            <i class="fa fa-floppy-o"  style="font-size: 20px;" aria-hidden="true"></i>
                        </div>


                    </div>

                    <div class="eo-vis-menu eo-vis-menu--single ng-scope ng-isolate-scope">
                        <div e-tooltip-html="true" title="预览" @click="handlePreview" style="font-size: 28px;"
                             ng-disabled="eoVisFormPreview.isDisabled()" ng-click="eoVisFormPreview.getFormPreview()"
                             ng-show="eoVisMenuBar.isFormEditor()" tabindex="0" aria-hidden="false"
                             aria-disabled="false"
                             class="eo-vis-menu-svgWrapper ng-isolate-scope">
                            <i class="layui-icon layui-icon-read" style="font-size: 20px;" aria-hidden="true"></i>
                        </div>
                    </div>

                    <div class="eo-vis-menu ng-scope ng-isolate-scope ng-hide" ng-show="eoVisDocker.isVisible()"
                         ng-if="!eoVisMenuBar.isDMNEditor() &amp;&amp; eoVisMenuBar.activeModelHasCanvas()"
                         aria-hidden="true">


                        <div  @click="handleLeft" class="eo-vis-menu-svgWrapper" style="font-size: 28px;" e-tooltip-html="true"
                              title="Auto layout"  tabindex="0">
                            <i class="layui-icon layui-icon-align-left" aria-hidden="true"></i>
                        </div>
                        <div @click="handleTop" class="eo-vis-menu-svgWrapper" style="font-size: 28px;" e-tooltip-html="true"
                             title="Delete a docker from an edge, by ctrl + click on it"
                             ng-click="eoVisDocker.enableDeleteDocker()" tabindex="0">
                            <i class="layui-icon layui-icon-align-center" aria-hidden="true"></i>
                        </div>

                        <div  @click="handleRight" class="eo-vis-menu-svgWrapper " style="font-size: 28px;" e-tooltip-html="true"
                              title="Change the position of shapes" ng-click="eoVisShapeTranslate.translateShapes()"
                              tabindex="0">
                            <i class="layui-icon layui-icon-align-right" aria-hidden="true"></i>
                        </div>
                    </div>
                </li><!-- end ngIf: eoVisMenuBar.isModelLoaded -->
            </ul>
        </div>
<!--        <el-button v-if="upload" type="warning" size="mini" round icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>-->
<!--        <el-button v-if="generateJson" type="success" size="mini" round icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>-->

        <el-main class="fm2-main">
            <el-container>
                <el-aside width="250px">




                    <div class="components-list">
                        <div class="widget-cate">基础字段</div>
                        <draggable tag="ul" :list="basicComponents"
                                   v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                                   @end="handleMoveEnd"
                                   @start="handleMoveStart"
                                   :move="handleMove"
                        >

                            <li class="form-edit-widget-label" :class="{'no-put': item.type == 'divider'}" v-for="(item, index) in basicComponents" :key="index">
                                <a class="components-body">


                                    <i class="icon iconfont" :class="item.icon"></i>


                                    <span>{{item.name}}</span>
                                </a>
                            </li>
                        </draggable>
                        <div class="widget-cate">杰狮组件</div>
                        <draggable tag="ul" :list="panguFieldComponents"
                                   v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                                   @end="handleMoveEnd"
                                   @start="handleMoveStart"
                                   :move="handleMove"
                        >

                            <li class="form-edit-widget-label" :class="{'no-put': item.type == 'table'}" v-for="(item, index) in panguFieldComponents" :key="index">
                                <a class="components-body">
                                    <i class="icon iconfont" :class="item.icon"></i>
                                    <span>{{item.name}}</span>
                                </a>
                            </li>
                        </draggable>
                        <div class="widget-cate">面板控件</div>
                        <draggable tag="ul" :list="advanceComponents"
                                   v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                                   @end="handleMoveEnd"
                                   @start="handleMoveStart"
                                   :move="handleMove"
                        >

                            <li class="form-edit-widget-label" :class="{'no-put': item.type == 'table'}" v-for="(item, index) in advanceComponents" :key="index">
                                <a class="components-body">
                                    <i class="icon iconfont" :class="item.icon"></i>
                                    <span>{{item.name}}</span>
                                </a>
                            </li>
                        </draggable>


                        <div class="widget-cate">导航</div>
                        <draggable tag="ul" :list="navigationComponents"
                                   v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                                   @end="handleMoveEnd"
                                   @start="handleMoveStart"
                                   :move="handleMove"
                        >

                            <li class="form-edit-widget-label no-put" v-for="(item, index) in navigationComponents" :key="index">
                                <a class="components-body">
                                    <i class="icon iconfont" :class="item.icon"></i>
                                    <span>{{item.name}}</span>
                                </a>
                            </li>
                        </draggable>

                        <div class="widget-cate">布局字段</div>
                        <draggable tag="ul" :list="layoutComponents"
                                   v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                                   @end="handleMoveEnd"
                                   @start="handleMoveStart"
                                   :move="handleMove"
                        >

                            <li class="form-edit-widget-label no-put" v-for="(item, index) in layoutComponents" :key="index">
                                <a class="components-body">
                                    <i class="icon iconfont" :class="item.icon"></i>
                                    <span>{{item.name}}</span>
                                </a>
                            </li>
                        </draggable>
                        <div class="widget-cate">不常用字段</div>
                        <draggable tag="ul" :list="uncommonlyUsedComponents"
                                   v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                                   @end="handleMoveEnd"
                                   @start="handleMoveStart"
                                   :move="handleMove"
                        >

                            <li class="form-edit-widget-label no-put" v-for="(item, index) in uncommonlyUsedComponents" :key="index">
                                <a class="components-body">
                                    <i  :class="item.icon" style="margin-left: 5px"></i>
                                    <span class="uncommonlyUsedComponentsSpan">{{item.name}}</span>
                                </a>
                            </li>
                        </draggable>
                    </div>

                </el-aside>
                <el-container class="center-container" direction="vertical">

                    <!--  <el-header class="btn-bar" style="height: 45px;">
                          <slot name="action">
                          </slot>

                          <el-button v-if="generateCode" type="primary" round size="mini" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
                          <el-button v-if="generateJson" type="success" size="mini" round icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
                          <el-button v-if="preview" type="info" size="mini" round icon="el-icon-view" @click="handlePreview">预览</el-button>
                          <el-button v-if="clearable" type="danger" size="mini" round icon="el-icon-delete" @click="handleClear">清空</el-button>
                          <el-button v-if="upload" type="warning" size="mini" round icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>
                      </el-header> -->

                    <el-main :class="{'widget-empty': widgetForm.list.length == 0}">

                        <!-- 中部表单放着区域 -->
                        <!-- sync 在子组件当中修改父组件的某个数据-->
                        <widget-form v-if="!resetJson" ref="widgetForm" :data="widgetForm"
                                     :select.sync="widgetFormSelect">

                        </widget-form>
                    </el-main>
                </el-container>
                <!-- 右侧字段和表单属性放置区域 -->
                <el-aside class="widget-config-container" >
                    <el-container>
                        <el-header height="45px">
                            <div class="config-tab" :class="{active: configTab=='widget'}"
                                 @click="handleConfigSelect('widget')">字段属性
                            </div>
                            <div class="config-tab" :class="{active: configTab=='form'}"
                                 @click="handleConfigSelect('form')">表单属性
                            </div>
                        </el-header>
                        <el-main class="config-content">
                            <!-- configTab 确定显示字段属性还是表单属性  -->
                            <widget-config v-show="configTab=='widget'" :data="widgetFormSelect" :structData="widgetForm"
                                           @getBlockData="getBlockData(arguments)"></widget-config>
                            <form-config ref="formConfig" @getjson="getData($event)" v-show="configTab=='form'"
                                         :data="widgetForm.config" :form="widgetForm"></form-config>
                            <widget-config ref="widgetConfig" @getBlockData="getBlockData($event)"></widget-config>
                        </el-main>
                    </el-container>

                </el-aside>
                <!-- 预览的组件 -->
                <cus-dialog :visible="previewVisible" @on-close="previewVisibleClose"
                            :title="widgetForm.config.formName" ref="widgetPreview" width="1000px" form>
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>{{widgetForm.config.formName}}</span>
                        </div>
                        <div  class="text item">
                            <generate-form insite="true" v-if="previewVisible" :data="widgetForm" :value="widgetModels"
                                           :remote="remoteFuncs" ref="generateForm">

                                <!-- 						<template v-slot:blank="scope">
                                                            宽度：
                                                            <el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
                                                            高度：
                                                            <el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
                                                        </template>

                                                        <template v-slot:abc="scope">
                                                            宽度：
                                                            <el-input v-model="scope.model.abc" style="width: 100px"></el-input>
                                                        </template> -->
                            </generate-form>
                        </div>
                    </el-card>


                    <template slot="action">

                        <el-button type="primary" @click="handleTest">获取数据</el-button>
                        <el-button @click="handleReset">重置</el-button>

                    </template>

                </cus-dialog>

                <cus-dialog :visible="uploadVisible" @on-close="uploadVisible = false" @on-submit="handleUploadJson"
                            ref="uploadJson" width="800px" form>
                    <el-alert type="info" title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"></el-alert>
                    <div id="uploadeditor" style="height: 400px;width: 100%;">{{jsonEg}}</div>
                </cus-dialog>

                <cus-dialog :visible="jsonVisible" @on-close="jsonVisible = false" ref="jsonPreview" width="800px" form>

                    <div id="jsoneditor" style="height: 400px;width: 100%;">{{jsonTemplate}}</div>

                    <template slot="action">
                        <el-button type="primary" class="json-btn" :data-clipboard-text="jsonCopyValue">复制数据</el-button>
                    </template>
                </cus-dialog>

                <cus-dialog :visible="codeVisible" @on-close="codeVisible = false" ref="codePreview" width="800px" form
                            :action="false">
                    <div id="codeeditor" style="height: 500px; width: 100%;">{{htmlTemplate}}</div>
                </cus-dialog>
            </el-container>
        </el-main>
        <el-footer height="30px" style="font-weight: 600;">Powered by
            <a target="_blank" href="">BPM-表单组件</a>
        </el-footer>
    </el-container>

</template>

<script>
    import Draggable from 'vuedraggable'   // vue拖动插件,拖动元素放在transition-group中
    import WidgetConfig from './WidgetConfig'  // 右侧 字段属性组件
    import FormConfig from './FormConfig'        //右侧 表单属性组件
    import WidgetForm from './WidgetForm'     // 生成中间区域表单的组件
    import CusDialog from './CusDialog'
    import GenerateForm from './GenerateForm'
    import Clipboard from 'clipboard'  //复制输入框,文本域,div元素到粘贴板中
    // 所有表单的基本配置
    import {basicComponents, layoutComponents, advanceComponents,navigationComponents,uncommonlyUsedComponents,panguFieldComponents} from './componentsConfig.js'
    import request from '../util/request.js'  // ajax请求
    import generateCode from './generateCode.js' // css与js的引入
    import API from './router/api.js'
    import {verification } from  './router/verification.js'
    import {isRepeat } from  './router/utils.js'


    export default {
        name: 'fm-making-form',
        components: {
            Draggable,
            WidgetConfig,
            FormConfig,    // 表单属性组件
            WidgetForm,
            GenerateForm,
            cusDialog: CusDialog
        },
        props: {  // 验证父组件传入数据的类型
            preview: {
                type: Boolean,
                default: false
            },
            generateCode: {
                type: Boolean,
                default: false
            },
            generateJson: {
                type: Boolean,
                default: false
            },
            upload: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            }
        },

        data() {  //  设置表单属性的相关字段
            return {
                basicComponents,
                layoutComponents,
                advanceComponents,
                panguFieldComponents,
                navigationComponents,
                uncommonlyUsedComponents,

                resetJson: false,
                widgetForm: {
                    list: [],
                    config: {
                        labelWidth: 100,
                        labelPosition: 'right',
                        size: 'small',
                        customClass: '',
                        formName: '表单名称',//表单名称
                        customStyle: '',
                        customJs: '',
                        jsExpand: '',
                        disable: false,
                        showAnnotation: false,
                        formNumber: this.createOrderNo() // 表单序号
                    },
                },
                configTab: 'widget',  // 默认显示字段属性
                widgetFormSelect: null,

                previewVisible: false,
                jsonVisible: false,
                codeVisible: false,
                uploadVisible: false,
                remoteFuncs: {
                    func_test(resolve) {
                        setTimeout(() => {
                            const options = [{
                                id: '1',
                                name: '1111'
                            },
                                {
                                    id: '2',
                                    name: '2222'
                                },
                                {
                                    id: '3',
                                    name: '3333'
                                }
                            ]

                            resolve(options)
                        }, 2000)
                    },

                    upload_callback(response, file, fileList) {
                        //console.log('callback', response, file, fileList)
                    }
                },
                widgetModels: {},
                blank: '',
                htmlTemplate: '',
                jsonTemplate: '',
                uploadEditor: null,
                jsonCopyValue: '',
                jsonClipboard: null,
                jsonEg: `{
  "list": [
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "icon-grid-",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "请假",
              "icon": "icon-input",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "cccc",
                "customClass": "",
                "disabled": false,
                "remoteFunc": "func_1572656611793",
                "remoteOptions": []

              },
              "novalid": {},
              "key": "1572656611793",
              "model": "day",
              "rules": [
                {
                  "type": "string",
                  "message": "请假格式不正确"
                }
              ]
            },
            {
              "type": "date",
              "name": "开始时间",
              "icon": "icon-date",
              "options": {
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "editable": true,
                "clearable": true,
                "placeholder": "",
                "startPlaceholder": "",
                "endPlaceholder": "",
                "type": "date",
                "format": "yyyy-MM-dd",
                "timestamp": false,
                "required": false,
                "width": "",
                "customClass": "",
                "remoteFunc": "func_1572656630994",
                "remoteOptions": []
              },
              "key": "1572656719473",
              "model": "start",
              "rules": [],
              "novalid": {}
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "请假人",
              "icon": "icon-input",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "customClass": "",
                "disabled": false,
                "remoteFunc": "func_1572656647372",
                "remoteOptions": []
              },
              "novalid": {},
              "key": "1572656647372",
              "model": "user",
              "rules": [
                {
                  "type": "string",
                  "message": "请假人格式不正确"
                }
              ]
            },
            {
              "type": "date",
              "name": "结束时间",
              "icon": "icon-date",
              "options": {
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "editable": true,
                "clearable": true,
                "placeholder": "",
                "startPlaceholder": "",
                "endPlaceholder": "",
                "type": "date",
                "format": "yyyy-MM-dd",
                "timestamp": false,
                "required": false,
                "width": "",
                "customClass": "",
                "remoteFunc": "func_1572656676710",
                "remoteOptions": []
              },
              "novalid": {},
              "key": "1572656736023",
              "model": "end",
              "rules": []
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "center",
        "align": "middle",
        "customClass": "",
        "remoteFunc": "func_1572656606443"
      },
      "key": "1572656606443",
      "model": "grid_1572656606443",
      "rules": []
    }
  ],
  "config": {
    "labelWidth": 100,
    "labelPosition": "right",
    "size": "small",
    "customClass": "",
	"formName":"请假流程",
	"formNumber":12323222
  }
}`
            }
        },
        mounted() {

            // 初始化表单数据渲染
            this.getFormData();

        },

        methods: {
            validatePass(rule, info, callback) {
                verification(rule,info,callback,null)

            },
            // 菜单栏的方法
            handleOpen(key, keyPath) {
                //   console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            getA() {

            },
            // handleGoGithub () {
            //   window.location.href = 分享牛'
            // },
            // 初始化获取表单数据
            getFormData() {
                if (this.$route) {
                    let params = this.$route.query;
                    if (params) {
                        var id = params.id;
                        if (id){
                            request.get(API.prefix + 'form/bus/render/start/get/' + id).then(res => {
                                var data = res.data;
                                var code = res.code;
                                if (code == 0) {
                                    this.handleFixedJson(data);
                                } else {
                                    //this.$message.error(res.msg);
                                }

                            })
                        }
                    }
                }



            },

            // 生成订单序列号
            createOrderNo() {
                var outTradeNo = "";  //订单号
                for (var i = 0; i < 6; i++) //6位随机数，用以加在时间戳后面。
                {
                    outTradeNo += Math.floor(Math.random() * 10);
                }
                return new Date().getTime() + outTradeNo;  //时间戳，用来生成订单号。
            },
            handleConfigSelect(value) {
                //console.log(value);
                this.configTab = value
            },
            handleMoveEnd(evt) {
                // 结束的时候触发
                //	console.log('end', evt)
            },
            handleMoveStart({
                                oldIndex
                            }) {

                // 拖动表单时触发
                //	console.log('2222');
                //console.log('start', oldIndex, this.basicComponents)
            },
            handleMove() {
                return true
            },
            handlePreview() {
                let style = document.createElement('style');
                style.type = "text/css";
                style.innerText = ".el-row--flex {\n" +
                    "                    display: block ;\n" +
                    "                }";

                document.getElementsByTagName('head')[0].appendChild(style)

                this.previewVisible = true

            },
            previewVisibleClose(){
                let style = document.createElement('style');
                style.type = "text/css";
                style.innerText = ".el-row--flex {\n" +
                    "                    display: flex ;\n" +
                    "                }";

                document.getElementsByTagName('head')[0].appendChild(style)

                this.previewVisible = false
            },
            handleLeft() {
                var config = this.widgetForm.config
                config.labelPosition='left'
            },
            handleRight() {
                var config = this.widgetForm.config
                config.labelPosition='right'
            },
            handleTop() {
                var config = this.widgetForm.config
                config.labelPosition='top'
            },

            handleReset() {
                this.$refs.generateForm.reset()
            },
            getAnnotationAction:function(list,resultList){
                list.forEach(item =>{
                    if (item.options) {
                        resultList[item.model]=item.options.annotationContext
                    }else{
                        list=item
                        this.getAnnotationAction(list,resultList)
                    }

                    if (item.tabColumns){
                        list=item.tabColumns
                        this.getAnnotationAction(list,resultList)
                    }
                    if (item.tableColumns){
                        list=item.tableColumns
                        this.getAnnotationAction(list,resultList)
                    }
                })
            },

            handleTest() {
                this.$refs.generateForm.getData().then(data => {
                    this.jsonVisible = true;
                    for(var key in data){
                        if(data[key]==undefined){
                            data[key]="";
                        }
                    }
                   var list=  this.$refs.formConfig.form.list;
                   var  resultList={};
                    this.getAnnotationAction(list,resultList)
                    var dataObj={};

                    data['annotation']=resultList;
                    this.jsonTemplate = data;
                    this.$nextTick(() => {
                        const editor = ace.edit('jsoneditor')
                        editor.session.setMode("ace/mode/json")

                        if (!this.jsonClipboard) {
                            this.jsonClipboard = new Clipboard('.json-btn')
                            this.jsonClipboard.on('success', (e) => {
                                this.$message.success('复制成功')
                            })
                        }
                        this.jsonCopyValue = JSON.stringify(data)
                    })
                    this.$refs.widgetPreview.end()
                }).catch(e => {
                    this.$refs.widgetPreview.end()
                })
            },

            handleGenerateJson() {
                this.jsonVisible = true
                this.jsonTemplate = this.widgetForm
                //console.log(JSON.stringify(this.widgetForm))
                this.$nextTick(() => {

                    const editor = ace.edit('jsoneditor')
                    editor.session.setMode("ace/mode/json")

                    if (!this.jsonClipboard) {
                        this.jsonClipboard = new Clipboard('.json-btn')
                        this.jsonClipboard.on('success', (e) => {
                            this.$message.success('复制成功')
                        })
                    }
                    this.jsonCopyValue = JSON.stringify(this.widgetForm)
                })
            },

            saveJson() {
                this.jsonTemplate = this.widgetForm
                // console.log(JSON.stringify(this.widgetForm))
                let params = this.$route.query;
                var id = params.id;
                let param = new FormData();
                param.append("jsonStr", encodeURIComponent(JSON.stringify(this.widgetForm)));
                var allKeys=[];
                this.widgetForm.list.find((item)=>{
                    allKeys.push( item.model)


                });
               var repeate=  isRepeat(allKeys);
               if (typeof  repeate=== 'boolean'){
                   request.post(API.prefix + '/form/design/saveJson/' + id, param, {headers: {'content-type': 'application/x-www-form-urlencoded'}})
                       .then((data) => {
                           // console.log(data)
                           if (data.code == 0) {
                               this.$message({
                                   message: '保存成功',
                                   type: 'success'
                               });
                           } else {
                               this.$message.error(data.msg);
                           }
                       }).catch(err => {
                           console.log(err)
                       }
                   )
               }else{

               var    obj = this.widgetForm.list.find((item)=>{//这里的userList就是上面遍历的数据源
                       return item.model === repeate;//筛选出匹配数据
                   });
                   this.$message({
                                       message: "「"+obj.name+"」"+'重复定义多次，不能进行表单的保存操作',
                                       type: 'error'
                                   });
               }


            },

            publish() {
                this.jsonTemplate = this.widgetForm
                let params = this.$route.query;
                var id = params.id;
                request.get(API.prefix + '/form/design/models/publish/' + id).then(res => {
                    var data = res.data;
                    var code = res.code;
                    if (code == 0) {
                        this.$router.go(-1);
                    } else {
                        this.$message.error(res.msg);
                    }

                })
            },
            handleGenerateCode() {
                this.codeVisible = true
                this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm))
                this.$nextTick(() => {
                    const editor = ace.edit('codeeditor')
                    editor.session.setMode("ace/mode/html")
                })
            },
            handleUpload() {
                this.uploadVisible = true
                // ace web编辑器
                this.$nextTick(() => {
                    this.uploadEditor = ace.edit('uploadeditor')
                    this.uploadEditor.session.setMode("ace/mode/json")
                })
            },
            handleUploadJson() {
                try {
                    this.setJSON(JSON.parse(this.uploadEditor.getValue()))
                    this.uploadVisible = false
                } catch (e) {
                    this.$message.error(e.message)
                    this.$refs.uploadJson.end()
                }
            },
            handleFixedJson(data) {
                try {
                    this.setJSON(JSON.parse(data))
                    this.uploadVisible = false
                } catch (e) {
                    this.$message.error(e.message)
                    this.$refs.uploadJson.end()
                }
            },
            handleClear() {
                this.widgetForm = {
                    list: [],
                    config: {
                        labelWidth: 100,
                        labelPosition: 'right',
                        size: 'small',
                        customClass: ''
                    },
                }
                this.$refs.formConfig.getA();

                this.widgetFormSelect = {}
            },
            getData(val) {

                var config = this.widgetForm.config
                var list = this.widgetForm.list;

                for (var i = 0; i < list.length; i++) {
                    list[i].options.span = parseInt(val);
                }
            },
            getBlockData(obj) {

                var val = obj[0];
                var key = obj[1];
                var list = this.widgetForm.list;

                for (var i = 0; i < list.length; i++) {
                    if (list[i].key == key) {
                        var tableColumns = list[i].tableColumns;
                        for (var j = 0; j < tableColumns.length; j++) {
                            tableColumns[j].options.span = parseInt(val);
                        }
                        break;
                    }
                }
            },
            getHtml() {
                return generateCode(JSON.stringify(this.widgetForm))
            },
            setJSON(json) {
                this.widgetForm = json

                if (json.list.length > 0) {
                    this.widgetFormSelect = json.list[0]
                }
            },
            handleInput(val) {
                //	console.log(val)
                this.blank = val
            }
        },
        watch: {
            widgetForm: {
                deep: true,
                handler: function (val) {

                    //	console.log(this.$refs.widgetForm)
                }
            }
        }
    }
</script>

<style lang="scss">

    .widget-empty {
        background: url('../assets/form_empty.png') no-repeat;
        background-position: 50%;
    }

    .custom1 .el-col {
        border: 1px solid #ccc;
        overflow: hidden;
        padding: 5px;
        // margin-right:-1px;
        // margin-bottom:-1px;
        margin-right: -1px;
        margin-bottom: -1px;
    }

    .custom .el-col {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    div.eo-vis-menu-svgWrapper:hover{
        color: dodgerblue;
    }
    .eo-vis-menu-bar-element .eo-vis-menu {
        border-right:none !important;
    }

    .components-list .form-edit-widget-label {
        font-size: 12px;
        display: block;
        width: 48% !important;
        line-height: 26px;
        position: relative;
        float: left;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 1%;
        color: #333;
        border: 1px solid #F4F6FC;
    }
    .uncommonlyUsedComponentsSpan{
        margin-left: 10px;
    }
</style>
